.fee-container {
  padding: 20px;

  .title {
    height: 30px;
    background-image: linear-gradient(90deg, #b6a4fe, #e6e6e6);
    margin-bottom: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: bold;
  }

  .title::before {
    content: '';
    width: 4px;
    height: 80%;
    background-color: #fff;
    margin-right: 8px;
  }

  .type {
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .type-title {
      flex-shrink: 1;
      width: 176px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: bold;
      background-color: #623bff;
      margin-right: 15px;
    }

    .type-box {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .type-item {
        width: 145px;
        height: 43px;
        background-color: #bdbdff;
        margin-right: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        cursor: pointer;
      }
      .type-item:first-child {
        background-color: #957bfe;
      }
    }
  }

  .body {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    // .item{
    //   margin-right: 4%;
    // }
    .item {
      display: flex;
      justify-content: center;
      flex-basis: 33%;
      margin-bottom: 20px;
    }
  }

}